<template>
  <section class="msg-detail">
    <div class="content">
      <p class="title">{{msg.time}}</p>
      <div class="detail" v-html="msg.content"></div>
    </div>
  </section>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { detailLetter } from '@/api/user/letter'

export default Vue.extend({
  data() {
    return {
      id: '',
      msg: {
        time: '',
        content: ''
      }
    }
  },
  created() {
    // this.init()
    // console.log('参数：：',this.$route.query)
    this.id = this.$route.query.id
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      const data = { id: this.id }
      detailLetter(data).then(res => {
        if (res.status == 1) {
          this.msg = {
            time: res.data.send_time,
            content: res.data.content
          }
        }
        this.$loadingWrap.close()
      })
    }
  }
})
</script>
<style lang="scss">
.msg-detail{
  margin-top: 18px;
  padding: 0 24px;
  font-size: 28px;
  .content{
    padding: 28px 30px 44px 38px;
    border-radius: 8px;
    background: #ffffff;
    .title{
      color: #8d8d8d;
    }
    .detail{
      margin-top: 18px;
      line-height: 44px;
      color: #323232;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>